<template>
	<uv-cell-group v-if="dataList.length">
		<uv-cell icon="integral-fill" v-for="(item,index) in dataList" :key="index" :name="index">
			<template #icon>
				<fui-icon size="48" color="#0052D9" :name="suffixConfig[item.suffix].icon || 'file'"></fui-icon>
			</template>
			<template #title>
				<text @click="onItem(item,index)">{{item.name}}</text>
			</template>
			<template #right-icon v-if="!isDetail">
				<uv-icon name="close" size="44rpx" color="#a3a3a3" @click="onDel(index)"></uv-icon>
			</template>
		</uv-cell>
	</uv-cell-group>
</template>

<script>
	import {
		suffixConfig
	} from './fileSuffix.js'
	import _ from 'lodash'
	import {
		extractFileType,
		getSuffix
	} from '../../../utils/util.js'
	import {
		PREVIEW_URL
	} from '../../../_env.js'
	export default {
		name: 'custom-file-list',
		props: {
			isDetail: Boolean,
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				suffixConfig,

			}
		},
		computed: {
			dataList() {
				let l = _.map(this.list, (item) => {

					if (!item.hasOwnProperty('isLocal')) {
						return {
							...item,
							previewData: `${PREVIEW_URL}${item.url}`,
							suffix: getSuffix(item.url),
						}

					}
					return {
						...item,
						previewData: item.base64,
					}

				})
				console.log(l);
				return l
			},
			previewList() {

				return _.map(this.dataList, 'previewData')
			}
		},
		emits: ['del'],
		methods: {
			onItem(data, index) {
				uni.previewImage({
					current: index,
					urls: this.previewList
				})
			},
			nameSlice(name) {
				const len = name?.length || 0;
				let result = ''
				if (len > 20) {
					result = `${name.slice(0, 20)}`;
				}

				return result;
			},
			onDel(index) {
				this.$emit('del', index)
			}
		}
	}
</script>

<style>

</style>